package com.ncr.travel.appmgr.client.view;

import java.util.Arrays;
import java.util.List;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.MouseOutEvent;
import com.google.gwt.event.dom.client.MouseOutHandler;
import com.google.gwt.event.dom.client.MouseWheelEvent;
import com.google.gwt.event.dom.client.MouseWheelHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.DecoratedPopupPanel;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Widget;


public class ColorPallete extends Composite {
    
    @UiTemplate("ColorPalleteView.ui.xml")
    interface ColorPalleteUiBinder extends UiBinder<Widget, ColorPallete> {
    }
    private static ColorPalleteUiBinder colorPalleteUiBinder = GWT.create(ColorPalleteUiBinder.class);

    public static final List<String> FONT_COLORS = Arrays.asList("#7B7676", "#5A2222", "#7B7642", "#4C660D", "#5778CA", "#1F2275", "#5011BC", "#D32F2F", "#ACE3FC", "#FABB91", "#FCDCAC", "#FBF304", "#FAF7F7", "#FCF86F",
                "#7891F5", "#F97C9C", "#7F2828", "#C853B5");
    
    
    public static final String COLOR_AUTOMATIC = "#000000";

    @UiField
    DecoratedPopupPanel popup;
    @UiField
    Image colorsImg;
    @UiField
    FlexTable colorsflxTbl;
    
    @UiField
    HorizontalPanel horizontalPanel;
    
    private int rowOfColorSelected = 0;
    private int columnOfcolorSelected = 1;

    private final FlowPanel mainPanel;

    private final ClickHandler fontOptionsClickHandler;
    
    public ColorPallete(FlowPanel panel, ClickHandler clickHandler) {
        initWidget(colorPalleteUiBinder.createAndBindUi(this));
        this.mainPanel = panel;
        this.fontOptionsClickHandler = clickHandler;
        MyPopupHandler handler = new MyPopupHandler();
        colorsflxTbl.addDomHandler(handler, MouseOutEvent.getType());
        colorsflxTbl.addDomHandler(handler, MouseWheelEvent.getType());
        colorsImg.addDomHandler(handler, MouseWheelEvent.getType());
        mainPanel.addDomHandler(handler, MouseWheelEvent.getType());

        HTML colorHtml = new HTML();
        colorHtml.setHeight("17px");
        colorHtml.setWidth("17px");
        colorHtml.setTitle(COLOR_AUTOMATIC);
        colorHtml.getElement().setId(COLOR_AUTOMATIC);
        colorHtml.addStyleName("mouseCursor_default");

        colorHtml.addClickHandler(fontOptionsClickHandler);
        colorsflxTbl.setWidget(0, 0, colorHtml);
        colorsflxTbl.getCellFormatter().getElement(0, 0).getStyle().setBackgroundColor(COLOR_AUTOMATIC);
        colorsflxTbl.getFlexCellFormatter().setColSpan(0, 1, 5);
        Label automatic = new Label("Automatic");
        automatic.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
        automatic.setStyleName("automatic");
        colorsflxTbl.setWidget(0, 1, automatic);
        int index = 0;
        for (int row = 1; row < 4; row++) {
            for (int column = 0; column < 6; column++) {
                colorHtml = new HTML();
                colorHtml.setHeight("17px");
                colorHtml.setWidth("17px");

                List<String> colorCodes = FONT_COLORS;
                colorHtml.getElement().setId(colorCodes.get(index));
                colorHtml.setTitle(colorCodes.get(index));
                colorHtml.addStyleName("mouseCursor_default");
                colorHtml.addClickHandler(fontOptionsClickHandler);
                colorsflxTbl.setWidget(row, column, colorHtml);
                colorsflxTbl.getCellFormatter().getElement(row, column).getStyle().setBackgroundColor(colorCodes.get(index++));
            }
        }
        /*hack to fix the layout problem. Setting invisible in uibinder is not working. It will
         * leave a gap at the button of the horizontalPanel*/
        popup.show();
        popup.hide();
    }
    
//    /**
//     * Fill Colors in Pattele and add click handlers
//     * @param panel
//     *        mainpanel
//     * @param clickHandler
//     *        clickHandler to handle user click event
//     */
//    public void fillColorsInPallete(FlowPanel panel, ClickHandler clickHandler) {
//        this.mainPanel = panel;
//        this.fontOptionsClickHandler = clickHandler;
//        MyPopupHandler handler = new MyPopupHandler();
//        colorsflxTbl.addDomHandler(handler, MouseOutEvent.getType());
//        colorsflxTbl.addDomHandler(handler, MouseWheelEvent.getType());
//        colorsImg.addDomHandler(handler, MouseWheelEvent.getType());
//        mainPanel.addDomHandler(handler, MouseWheelEvent.getType());
//
//        HTML colorHtml = new HTML();
//        colorHtml.setHeight("17px");
//        colorHtml.setWidth("17px");
//        colorHtml.setTitle(COLOR_AUTOMATIC);
//        colorHtml.getElement().setId(COLOR_AUTOMATIC);
//        colorHtml.addStyleName("mouseCursor_default");
//
//        colorHtml.addClickHandler(fontOptionsClickHandler);
//        colorsflxTbl.setWidget(0, 0, colorHtml);
//        colorsflxTbl.getCellFormatter().getElement(0, 0).getStyle().setBackgroundColor(COLOR_AUTOMATIC);
//        colorsflxTbl.getFlexCellFormatter().setColSpan(0, 1, 5);
//        Label automatic = new Label("Automatic");
//        automatic.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
//        automatic.setStyleName("automatic");
//        colorsflxTbl.setWidget(0, 1, automatic);
//        int index = 0;
//        for (int row = 1; row < 4; row++) {
//            for (int column = 0; column < 6; column++) {
//                colorHtml = new HTML();
//                colorHtml.setHeight("17px");
//                colorHtml.setWidth("17px");
//
//                List<String> colorCodes = FONT_COLORS;
//                colorHtml.getElement().setId(colorCodes.get(index));
//                colorHtml.setTitle(colorCodes.get(index));
//                colorHtml.addStyleName("mouseCursor_default");
//                colorHtml.addClickHandler(fontOptionsClickHandler);
//                colorsflxTbl.setWidget(row, column, colorHtml);
//                colorsflxTbl.getCellFormatter().getElement(row, column).getStyle().setBackgroundColor(colorCodes.get(index++));
//            }
//        }
//        /*hack to fix the layout problem. Setting invisible in uibinder is not working. It will
//         * leave a gap at the button of the horizontalPanel*/
//        popup.show();
//        popup.hide();
//        
//    }

    public void setSelectedColor(String color) {
        colorsflxTbl.getCellFormatter().removeStyleName(rowOfColorSelected, columnOfcolorSelected, "borderForSelected");
        int index = FONT_COLORS.indexOf(color);
        if (index != -1) {
            rowOfColorSelected = 1 + (index / 6);
            columnOfcolorSelected = index % 6;
            colorsflxTbl.getCellFormatter().addStyleName(rowOfColorSelected, columnOfcolorSelected, "borderForSelected");
        }
    }

    public class MyPopupHandler implements MouseOutHandler, MouseWheelHandler {

        @Override
        public void onMouseOut(MouseOutEvent event) {
            popup.hide();
        }

        @Override
        public void onMouseWheel(MouseWheelEvent event) {
            popup.hide();
        }
    }
    
   @UiHandler("colorsImg")
   void colorsImgOnClick(ClickEvent event) {
       if (popup.isShowing()) {
           popup.hide();
           return;
       }
       Widget source = (Widget) event.getSource();
       popup.setPopupPosition(source.getAbsoluteLeft(), source.getAbsoluteTop() + source.getOffsetHeight());
       popup.showRelativeTo(colorsImg);
   }
}
